<script setup lang="ts">
import type { StudentWordItem } from '@/api/types/student'
import NavBar from '@/components/NavBar/index.vue'
import { useStudyWords } from '@/composables/useStudyWords'
import { handleNextStep, LearningState } from '@/services/learningStateMachine'
import { useUnitStudyWordsStore } from '@/stores/modules/useUnitStudyWordsStore'
import { navigateBack } from '@/utils/navigation'
import { onMounted, ref } from 'vue'
import CuttingContainer from './components/CuttingContainer.vue'
import WordCuttingSept1 from './components/WordCuttingSept1.vue'
import WordCuttingSept2 from './components/WordCuttingSept2.vue'

const unitStudyWordsStore = useUnitStudyWordsStore()
const isShowSelectWord = ref(false)

const {
  localWords,
  initStudyWords,
  updateWordClickNum,
  randomizeWords,
  setActiveWord,
} = useStudyWords()

// 初始化本地数据
onMounted(() => {
  unitStudyWordsStore.updateStudyStartTime()
  initStudyWords(unitStudyWordsStore.allGroupWords)
})

function handleClickCard(item: StudentWordItem) {
  updateWordClickNum(item.wordId)
}

function handleWordActivate(wordId: string | number) {
  setActiveWord(wordId)
}

function handleRandomWord() {
  randomizeWords()
}

function handleOnFinish() {
  isShowSelectWord.value = true
}

function handleOnComplete() {
  // 混合全部检查完成后的下一步
  handleNextStep(LearningState.MIXED_GROUP_ALL)
}
</script>

<template>
  <CuttingContainer>
    <NavBar title="全部分组混合检查" @left-click="navigateBack" />

    <template v-if="!isShowSelectWord">
      <!-- 剪刀 -->
      <WordCuttingSept1
        :words="localWords"
        @click-card="handleClickCard"
        @activate="handleWordActivate"
        @on-finish="handleOnFinish"
      />

      <view v-if="false" class="action-bar">
        <view class="action-btn" @tap="handleRandomWord">
          <uni-icons type="refresh" size="24" color="#fff" />
          <text>随机</text>
        </view>
      </view>
    </template>

    <!-- 选择 -->
    <WordCuttingSept2
      v-else
      :words="localWords"
      @click-card="handleClickCard"
      @activate="handleWordActivate"
      @on-complete="handleOnComplete"
    />
  </CuttingContainer>
</template>

<style lang="scss" scoped>
.action-bar {
  display: flex;
  justify-content: center;
  margin-top: 30rpx;
  margin-bottom: 30rpx;
}

.action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #4CAF50;
  color: #fff;
  padding: 10rpx 30rpx;
  border-radius: 30rpx;

  text {
    margin-left: 10rpx;
  }
}
</style>
